Panels
Description
Panels present a convenient way for organizing mobile applications. The controls that make up an application are placed inside Panel Cards. If Panel Cards are placed inside a Panel Navigator, then users can move through the Panel Cards by swiping their mobile device and/or pressing specified buttons. When placed in a Panel Layout, both Panel Navigator containers and Panel Cards can be designed to appear on the same screen.
- Name
- Description
- Adding and Removing Panels Dynamically
You can add and remove panels using Javascript, without having to place [Panel Card] containers in a [Panel Navigator]. This guide demonstrates how to build a UX component that can dynamically add panels that have a designated panel number defined by the user.
- Constraining a UX with Panels to an Element
When a UX component that uses Panels is rendered, by default it consumes the entire window (this is only true if UX uses Panels).
- Create a Docked Panel with a Working Menu
This guide shows how to create a docked Panel that can be opened by clicking on a button. The docked menu will then contain a list of items that can link back to different Panels in a Panel Layout.
- Flow Collapse Buttons
Allows you to put a button in a Panel (only applies if the Panel is contained within a PanelLayout) to 'collapse the flow' of Panels that come 'before' the current Panel. By 'collapsing the flow' of a Panel, you make the Panel invisible.
- Preventing a Panel from Losing Focus - onBeforePanelActivate Event
This event is useful if you want to prevent the Panel that has focus losing focus.
- Quick Panel Genie
The Quick Panel Genie allows you to define a complex Panel layout quickly.
- Storing and Restoring Panels
You can use Javascript to add the ability to save and restore the 'state' of a Panel. This means that when a user moves to a deeply nested panel inside a Panel Layout and/or Panel Navigator, they can save the Panel that they are on, move to a different panel, and then hit a 'Restore' button to take them back to the Panel that they saved.
- Understanding Panels - Panel Layouts, Panel Navigators and Panel Cards
Understanding how Panels work is key to understanding how to build applications for mobile devices.
Panel Types
There are several types of panel cards:
- Panel Type
- Description
- Panel Card
A container used to display controls on a screen. A Panel Card can also contain Panel Headers, Panel Footers, or Panel Overlays.
- Panel Layout
A container for other Panels, including Panel Card, Panel Navigators, Panel Layouts, and Panel Headers, Footers, and Overlays.
- Panel Navigator
A container for other Panels, including Panel Card, Panel Layout, Panel Navigators, and Panel Headers, Footers, and Overlays.
- Panel Header
A container for adding controls to the header of a Panel, including Panel Cards, Panel Layouts, and Panel Navigators.
- Panel Footer
A container for adding controls to the footer of a Panel, including Panel Cards, Panel Layouts, and Panel Navigators.
- Panel Overlay
A container used to display controls or other content on top of a Panel, including Panel Cards, Panel Layouts, and Panel Navigators.
See also the Panel Properties section of the documentation.